<template>
  <div class="video-list">
    <van-swipe ref="vanSwipe" style="height: 100%;" vertical :loop="true" :show-indicators="false" @change="onChange">
      <van-swipe-item v-for="(item, index) in dataList" :key="index">
        <div class="video-box">
          <video :ref="'video' + item.id" :src="item.url" @click.prevent="onClick(item)"></video>
          <img v-show="!isPaly" @click.prevent="onClick(item)" class="play-img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=249770765,1681014684&fm=26&gp=0.jpg" alt="" srcset="" />
        </div>
        <div class="infobar-warp">
          <info-bar></info-bar>
        </div>
        <div class="right-warp">
          <right-bar @changeCom="showCom"></right-bar>
        </div>
      </van-swipe-item>
    </van-swipe>

    <!-- 评论 -->
    <transition name="up">
      <div class="comment-warp" v-if="showComment">
        <div class="comment-list">
          <div class="comment-top">
            <div class="number">15.0w评论</div>
            <div class="close" @click="close"><span>x</span></div>
          </div>

          <div class="comment-body">
            <div class="comment-box">
              <div class="comment-item">
                <div class="user-pic"><img src="../../assets/img/xxx.jpeg" /></div>
                <div class="item-info">
                  <div class="reply">
                    <p class="name">测试员</p>
                    <p class="reply-des">这是一段评论测试内容 <span class="time">04-20</span></p>
                  </div>
                  <div class="zan">
                    <span class="iconfont icon-aixin"></span>
                    <p>200</p>
                  </div>
                </div>
              </div>

              <div class="reply-input">
                <input type="text" name="" id="" placeholder="留下你的精彩评论" />
                <span class="at1">@</span>
                <span class="iconfont icon-pinglun"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import 'swiper/css/swiper.css';
//导入播放组件
// import Videos from '../../components/index/Videos';
import InfoBar from './InfoBar';
import RightBar from './RightBar';
import axios from 'axios';
export default {
  name: 'VideoList',
  components: {
    //注册swiper组件
    // Videos,
    InfoBar,
    RightBar,
  },
  methods: {
    //上滑
    nextVideo(index) {
      //通过DOM元素来获取子组件的方法
      console.log('上滑');
      //上一个视频停止
      // console.log(this.dataList[this.current].id, '暂停');
      this.$refs['video' + this.dataList[this.current].id].pause();
      //下一个视频开始
      // console.log(this.dataList[index].id, '开始');
      this.$refs['video' + this.dataList[index].id].play();
      this.getData(index === this.dataList.length - 1 ? 0 : index + 1);
    },
    //下滑
    preVideo(index) {
      console.log('下滑');
      // console.log(this.dataList[this.current].id, '暂停');
      this.$refs['video' + this.dataList[this.current].id].pause();
      console.log(this.dataList[index].id, '开始');
      this.$refs['video' + this.dataList[index].id].play();
      this.getData(index === this.dataList.length - 1 ? 0 : index + 1);
    },
    //弹出评论
    showCom() {
      this.showComment = true;
    },
    close() {
      this.showComment = false;
    },
    onChange(e) {
      console.log('当前位置第', e, '项');
      console.log('上一次位置', this.current);
      this.page += 1;
      const index = e;
      // if (index === this.dataList.length - 1) {
      //   this.getData();
      // }
      if (index === 0 && this.current === this.dataList.length - 1) {
        this.preVideo(index);
        this.current = index;
        return;
      }
      if (index < this.current || (index === 3 && this.current === 0) || (index + 1 === this.current && this.current === this.dataList.length - 1)) {
        this.nextVideo(index);
      } else {
        this.preVideo(index);
      }
      this.current = index;
    },
    // 点击
    onClick(e) {
      //判断当前是处于暂停还是播放状态，如果是暂停状态，就播放， 如果是播放状态， 就暂停
      console.log('click', e.id);
      const dom = this.$refs['video' + e.id];
      if (dom.paused == true) {
        dom.play();
        this.isPaly = true;
      } else {
        dom.pause();
        this.isPaly = false;
      }
    },
    // 接口请求，获取数据
    getData(index) {
      this.isPaly = true;
      console.log('接口请求，获取数据-----');
      const items = [
        'http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4',
        'http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4',
        'http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4',
        'http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4',
      ];
      const url = items[Math.floor(Math.random() * this.dataList.length)];
      this.dataList[index] = {
        id: new Date().getTime(),
        url,
      };
      console.log('改第', index, '项数据');
    },
  },
  data() {
    return {
      showComment: false,
      current: 0, //当前所在位置下标
      isPaly: false, //是否正在播放
      page: 1,
      dataList: [
        {
          id: 10,
          url: 'http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4',
        },
        {
          id: 20,
          url: 'http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4',
        },
        {
          id: 30,
          url: 'http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4',
        },
        {
          id: 40,
          url: 'http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4',
        },
      ],
    };
  },
  mounted() {
    const dom = this.$refs['video' + this.dataList[0].id];
    dom.load();
  },
};
</script>

<style scope lang="scss">
.video-list {
  height: 100%;
}
.swiper-container {
  height: 100%;
  position: relative;
}
.infobar-warp {
  position: absolute;
  bottom: 55px;
  left: 0;
}
.right-warp {
  position: absolute;
  bottom: 50px;
  right: 10px;
}
/* 评论 */
.up-enter-active,
.up-leave-active {
  transition: all 0.5s;
}
.up-enter, .up-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 1;
  transform: translateY(100%);
}

.comment-warp {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 500px;
  width: 100%;
  background: white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  z-index: 999;
  padding: 10px 10px;
  box-sizing: border-box;
}
.comment-top {
  display: flex;
  align-items: center;
}
.number {
  flex-grow: 1;
  text-align: center;
}
.close {
  padding-right: 10px;
  font-size: 30px;
  color: #666;
}
.comment-body {
  max-width: 450px;
  overflow: auto;
  margin-top: 20px;
}
.comment-item {
  display: flex;
}
.user-pic img {
  height: 33px;
  width: 33px;
  border-radius: 50%;
}
.item-info {
  margin-left: 10px;
  display: flex;
  flex: 1 1 auto;
}
.reply {
  width: 90%;
}
.reply-des {
  line-height: 24px;
}
.reply .name {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}
.reply .time {
  color: #666;
}
.zan {
  text-align: center;
}
.zan .iconfont {
  font-size: 20px;
}
.zan p {
  color: #cccccc;
  margin-top: 5px;
}

.reply-input {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
}
.reply-input input {
  line-height: 40px;
  width: 70%;
  border: none;
  padding: 0 10px;
}
.reply-input .at1 {
  font-size: 30px;
  color: #cccccc;
  margin-right: 8%;
}
.reply-input .iconfont {
  font-size: 30px;
  color: #cccccc;
}
.video-box {
  position: relative;
  img {
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 50px;
    height: 50px;
  }
}
</style>
